@use "blog.variable.module.scss" as blog;

.blog-detail {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2vh;
  padding: 10vh 2vw 3vh 2vw;

  .blog-md {
    height: 100%;
    width: 100%;
    padding: 10px;
    overflow: auto;

    .md-editor {
      height: 100%;
    }
  }
}

.blog-title {
  width: 100%;
  display: grid;
  grid-template-rows: 1fr 1fr;
  align-items: center;
  gap: 1vh;

  .title {
    background-color: blog.$theme-color;
    padding: 5px;
    border: 2px solid blog.$theme-color;
    border-radius: 10px;
    text-align: center;
    font-size: blog.$blog-title-font-size;
    font-family: "华文楷体", serif;
  }
}

.blog-copyright {
  width: 100%;
  background-color: var(--color-copyright-bg);

  padding: 10px;
  border-left: 3px solid #FD2C17;
  font-size:  blog.$small-font-size;

  display: flex;
  flex-direction: column;
  gap: 1vh;

  strong {
    margin-right: 0.2vw;
  }
}

.blog-ending {
  span {
    color: #CFCFCF;
  }
}

.blog-detail-mobile {
  padding: 10px;

  display: flex;
  flex-direction: column;
  gap: 2vh;
}
